<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/public.css}" media="all">
    <style>
        .layui-table-main,.layui-table-view{
            height: 100% !important;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
<fieldset class="table-search-fieldset">
    <legend>搜索条件</legend>
    <form class="layui-form layui-form-pane" action="" id="formDate">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">用户姓名</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">入职日期</label>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="text" name="startDate" id="startDate" placeholder="开始日期" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid">-</div>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="text" name="endDate" id="endDate" placeholder="结束日期" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <button type="submit" id="btn-sarch" class="layui-btn layui-btn-primary"  lay-submit lay-filter="btn-search-filter"><i class="layui-icon layui-icon-search"></i> 搜 索</button>
                <button type="reset" id="btn-reset" class="layui-btn layui-btn-primary"><i class="layui-icon layui-icon-fonts-clear"></i> 清 空</button>
            </div>
        </div>
    </form>
</fieldset>
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 新增 </button>
            <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除 </button>
        </div>
    </script>
    <table id="table-emp" lay-filter="table-emp-filter"></table>
    <script type="text/html" id="currentTableBar">
        <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
    </script>
    </div>
</div>
</body>
<script th:src="@{/webjars/jquery/3.5.1/jquery.min.js}" charset="utf-8"></script>
<script th:src="@{/layui/layui.js}" charset="utf-8"></script>
<script type="txt/html" id="convertSex">
    {{#
        if(d.sex == 'M'){
            return '男';
        }else if(d.sex == 'F'){
            return '女';
        }else{
            return '未知';
        }
    }}
</script>
<script type="txt/html" id="convertDpt">
    {{#
        return d.dept.deptName;
    }}
</script>
<script th:inline="javascript">

    function refreshTable(){
        $("#btn-reset").click();
        $("#btn-sarch").click();
    }

    var ctxPath = [[@{/}]];
    layui.use(['form','laydate','table'],function(){
        var laydate = layui.laydate;
        var table = layui.table;
        var form = layui.form;

        //执行一个laydate实例
        laydate.render({
            elem: '#startDate'
        });

        laydate.render({
            elem: '#endDate'
        })

        //表格头部按钮
        table.on('toolbar(table-emp-filter)',function(obj){
            if(obj.event == 'add'){
                layer.open({
                    type: 2,
                    shade: 0.2,
                    title: '新增用户',
                    maxmin: true,
                    shadeClose: false,
                    area: ['80%', '80%'],
                    content: ctxPath+'emp/addreg',
                })
            }else if(obj.event == 'delete'){
                var checkStatus = table.checkStatus("table-emp");
                if(checkStatus.data.length == 0){
                    layer.alert('没有选择数据！',{icon: 2,anim: 6,title: "警告"})
                    return false;
                }
                layer.confirm("删除后无法恢复！",{icon: 3,title: "提示"},function (){
                    var idArr = new Array();
                    $(checkStatus.data).each(function (){
                        idArr.push(this.empId)
                    })
                    //异步请求删除
                    var url = ctxPath + "emp/"+idArr.join(",")
                    var params = { _method:"DELETE" }
                    $.post(url,params,function (res){
                        if(res.code == 0){
                            layer.msg('删除成功！',{icon: 6},function(){
                                refreshTable();
                            })
                        }else{
                            layer.msg('删除失败！',{icon: 2,anim: 6})
                        }
                    })
                })
            }
        })

        //人员列表
        table.render({
            elem: '#table-emp'
            ,height: 312
            ,url: ctxPath+'emp/list' //数据接口
            ,toolbar: '#toolbarDemo'
            ,defaultToolbar: ['filter', 'exports', 'print', {
                    title: '提示',
                    layEvent: 'LAYTABLE_TIPS',
                    icon: 'layui-icon-tips'
            }]
            ,page: true //开启分页
            ,cols: [[ //表头
                {type: 'checkbox',width: 40,fixed:'left',align: "center"},
                {field: 'empId',title:'编号',width:80,sort:true,fixed:'left', align: "center"},
                {field: 'name', width: 80, title: '姓名', align: "center"},
                {field: 'sex', width: 80, title: '性别', sort: true, align: "center",templet: '#convertSex'},
                {field: 'age', width: 80, title: '年龄', align: "center"},
                {field: 'sal', title: '工资', minWidth: 100, align: "center"},
                {field: 'dept', width: 100, title: '部门', sort: true , align: "center",templet: '#convertDpt'},
                {field: 'birthday', width: 150, title: '入职日期', sort: true , align: "center"},
                {field: 'address', title: '地址',width: 300 , align: "center"},
                {title: '操作', minWidth: 150,toolbar: '#currentTableBar', align: "center"}
            ]],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 10,
            skin: 'line'
        });

        //监听表单提交
        form.on('submit(btn-search-filter)',function (data){
            console.log(data.field)
        table.reload('table-emp',{
            where:{
            name: data.field.name,
            startDate: data.field.startDate,
            endDate: data.field.endDate
            }
            ,page: {
                curr: 1
            }
        });
            return false;
        });

        //监听表格操作
        table.on('tool(table-emp-filter)',function (obj){
            var data = obj.data;
            var layEvent = obj.event;
            if(layEvent == 'delete'){
                layer.confirm("删除员工："+data.name+"?",{icon: 3,title: "提示"},function (){
                    //异步请求删除
                    var url = ctxPath + "emp/"+data.empId
                    var params = { _method:"DELETE" }
                    $.post(url,params,function (res){
                        if(res.code == 0){
                            layer.msg('删除成功！',{icon: 6},function(){
                                refreshTable();
                            })
                        }else{
                            layer.msg('删除失败！',{icon: 2,anim: 6})
                        }
                    })
                })
            }else if(layEvent == 'edit'){
                layer.open({
                    type: 2,
                    shade: 0.2,
                    title: '修改用户',
                    maxmin: true,
                    shadeClose: false,
                    area: ['80%', '80%'],
                    content: ctxPath+'emp/'+data.empId,
                })
            }
        })

    });
</script>
</html>